<script setup>
</script>

<template>
  <!-- 水道信息 -->
  <div class="main">
    <div class="top">
      <span class="img">
        <img src="../static/images/Slice21.png" alt="" srcset="" />
      </span>
      <span class="name">桂州水道</span>
      <div class="btn">详情<i class="righticon">&#xe622;</i></div>
    </div>
    <div class="bottom">
      <div class="singleItem">
        <div class="out first">
          <div class="left">航道名称</div>
          <div class="right">桂州水道</div>
        </div>
        <div class="out">
          <div class="left">技术等级</div>
          <div class="right">IV</div>
        </div>
      </div>

      <div class="singleItem">
        <div class="out first">
          <div class="left">维护等级</div>
          <div class="right">四</div>
        </div>
        <div class="out">
          <div class="left">维护水深</div>
          <div class="right">3</div>
        </div>
      </div>

      <div class="singleItem">
        <div class="out first">
          <div class="left">维护宽度</div>
          <div class="right">50</div>
        </div>
        <div class="out">
          <div class="left">弯曲半径</div>
          <div class="right">350</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  .top {
    margin-top: 16px;
    margin-left: 16px;
    display: flex;
    .img {
      width: 20px;
      height: 20px;
      padding: 2px 0;
      margin-right: 8px;
    }
    .name {
      height: 24px;
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 24px;
      margin-right: 16px;
    }
    .btn {
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #266fe8;
      .righticon {
        margin-left: 4px;
        font-family: "iconfont";
        font-size: 16px;
        font-style: normal;
      }
    }
  }
  .bottom {
    .singleItem {
      margin-top: 24px;
      margin-right: 16px;
      margin-left: 16px;
      display: flex;
      justify-content: space-between;
      .out {
        width: 50%;
        display: flex;
        justify-content: space-between;
      }
      .first {
        margin-right: 32px;
      }
    }
  }
}
</style>